<template>
    <div>
        <global-tables
            @handleAllSelect="handleAllSelect"
            @changePage="handleChangePage"
            :list="list"
            :total="total"
            :loading="loading"
            :columns="columns"
            :current="search.pageindex"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div></div>
                    <div class="table-top-wrap-bottom">
                        <div style="margin:0 10px;width:150px;">
                            <AsyncSelect
                                :vague="true"
                                placeholder="门店"
                                :theWay="'get'"
                                :currentModel="search.shopid + ''"
                                :url="'Shop/GetShopList'"
                                :value="'ID'"
                                @setDictionaries="setDictionariesSelect"
                                typeOf="store"
                            ></AsyncSelect>
                        </div>
                        <div>
                            <Select style="width:100px" v-model="search.ischeck">
                                <Option :value="'false'" :key="1">未审核</Option>
                                <Option :value="'true'" :key="2">已审核</Option>
                                <!-- <Option :value="'-1'" :key="3">全部</Option> -->
                            </Select>
                        </div>
                        <div>
                            <input
                                type="text"
                                class="style-input"
                                @keyup.enter="handleSearch"
                                style="margin:0 0 10px 10px; width:200px;"
                                v-model="search.keyword"
                                placeholder="请输入门店名称"
                            />
                            <!-- <i-input style="display:none"></i-input> -->
                        </div>
                        <div>
                            <Button
                                icon="ios-search"
                                @click="handleSearch"
                                class="search-btn theme-btn"
                            >搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
    </div>
</template>

<script>
/**
 *  商品列表
 */
import { cyclicRouting, getdate } from '@/util'
import { getModulePermission } from '@/api/user'
import Api from './service'
import GlobalTables from '@/components/GlobalTables'
import AsyncSelect from '@/components/AsyncSelect'
export default {
    name: 'ProductsList',
    components: {
        GlobalTables,
        AsyncSelect
    },
    data() {
        return {
            list: [],
            categoriesList: [],
            categoriesListValue: [],
            total: 0,
            itemId: 0,
            loading: true,
            isDelete: false,
            isAddBtn: false,
            isUpperUnder: false,
            isModal: false,
            allSelectArr: null,
            ModalTitle: '新建商品',
            search: {
                keyword: '',
                shopid: '',
                ischeck: 'false',
                pageindex: 1,
                pagesize: 10
            },
            /* 表头 */
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '门店名称',
                    width: 140,
                    align: 'center',
                    key: 'ShopName'
                },
                {
                    title: '药品名称',
                    width: 250,
                    key: 'ProName'
                },
                {
                    title: '规格',
                    align: 'center',
                    key: 'Spec',
                    width: 150
                },
                {
                    title: '生产厂家',
                    width: 250,
                    key: 'FactoryName'
                },
                {
                    title: '商品分类',
                    align: 'center',

                    key: 'ThirdType',
                    width: 150
                },
                {
                    title: '售价',
                    align: 'center',

                    key: 'PriceNew'
                },
                // {
                //     title: '销售单位',
                //     width: 120,
                //     key: 'UnitSales',
                //     render: (h, params) => {
                //         const { UnitSales, UnitBuy, UnitCount } = params.row
                //         if (UnitSales == UnitBuy) {
                //             return h('div', [h('p', {}, UnitSales)])
                //         } else {
                //             return h('div', [
                //                 h(
                //                     'p',
                //                     {},
                //                     `1${UnitBuy} =  ${UnitCount} ${UnitSales} `
                //                 )
                //             ])
                //         }
                //     }
                // },

                {
                    title: '提交人',
                    key: 'Creator',
                    width: 100
                },
                {
                    title: '提交时间',
                    width: 120,
                    render: (h, params) => {
                        return h('div', [
                            params.row.CreateTime != '1970-01-01 00:00:00' &&
                                h(
                                    'span',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        }
                                    },
                                    getdate(
                                        new Date(
                                            params.row.CreateTime
                                        ).getTime()
                                    )
                                )
                        ])
                    }
                },

                {
                    title: '操作',
                    width: 80,
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            // isEdit &&
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        background: '#5ab1ef',
                                        border: 'none',
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleBtnClick(
                                                params.row,
                                                'edit'
                                            )
                                        }
                                    }
                                },
                                '审核'
                            )
                            // isEdit &&
                            // h(
                            //     'Button',
                            //     {
                            //         props: {
                            //             type: 'primary',
                            //             size: 'small'
                            //         },
                            //         style: {
                            //             background: '#5ab1ef',
                            //             border: 'none',
                            //             marginRight: '5px'
                            //         },
                            //         on: {
                            //             click: () => {
                            //                 this.handleBtnClick(params.row, 'edit');
                            //             }
                            //         }
                            //     },
                            //     '查看'
                            // )
                        ])
                    }
                }
            ]
        }
    },
    watch: {
        categoriesListValue() {
            if (this.categoriesListValue.length == 0) {
                this.search.type = 0
                this.getTablesListData()
            }
        }
    },
    methods: {
        setMethod(item, value) {
            this.search[value] = item
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search
            Api.getTablesList(data).then(res => {
                this.list = res.data.rows
                this.loading = false
                this.total = res.data.records
            })
        },
        setDictionariesSelect(item) {
            this.search.shopid = item.ID
        },
        /* 表格查询 */
        handleSearch() {
            this.search.type = this.categoriesListValue[
                this.categoriesListValue.length - 1
            ]
            this.loading = true
            this.getTablesListData()
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            if (type == 'edit' || type == 'add') {
                this.itemId = 0
                if (type == 'edit') {
                    this.itemId = item.ID
                }
                this.$router.push({
                    path: `/products-increase-check/${this.itemId}`
                })
            } else if (type === 'norm') {
                this.$router.push({
                    path: `/products-list-norm/${item.ID}/${item.ProName}/${
                        item.ProCode
                    }`
                })
                sessionStorage.ProName = item.ProName
            } else if (type === 'upper' || type === 'under') {
                let title = ''
                if (type == 'upper') {
                    title = '上架'
                } else {
                    title = '下架'
                }
                if (this.allSelectArr) {
                    this.$Modal.confirm({
                        title: `你确定要${title}吗`,
                        onOk: () => {
                            Api.UpperAndLowerShelves({
                                ids: this.allSelectArr,
                                operation: type == 'upper' ? true : false
                            }).then(res => {
                                if (res.state == 'success') {
                                    this.$Message.success(res.message)
                                    this.allSelectArr = ''
                                } else {
                                    this.$Message.error(res.message)
                                }
                                this.getTablesListData()
                            })
                        },
                        onCancel: () => {
                            this.$Message.info('取消成功')
                        }
                    })
                } else {
                    this.$Message.error('请先选择需要操作的记录')
                }
            } else if (type === 'delete') {
                if (this.allSelectArr) {
                    this.$Modal.confirm({
                        title: `你确定要删除吗`,
                        onOk: () => {
                            Api.deleteItem({
                                ids: this.allSelectArr
                            }).then(res => {
                                if (res.state == 'success') {
                                    this.$Message.success(res.message)
                                    this.allSelectArr = ''
                                } else {
                                    this.$Message.error(res.message)
                                }
                                this.getTablesListData()
                            })
                        },
                        onCancel: () => {
                            this.$Message.info('取消成功')
                        }
                    })
                } else {
                    this.$Message.error('请先选择需要操作的记录')
                }
            }
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true
            if (type == 'page') {
                this.search.pageindex = page
                this.getTablesListData()
            } else {
                this.search.pagesize = page
                this.getTablesListData()
            }
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = []
            for (let item in list) {
                arr.push(list[item].ID)
                arr.join(',')
            }
            arr = arr.join(',')
            this.allSelectArr = arr
        },
        /* 模糊搜索商品类别 */
        setSearchtype(e) {
            this.search.type = e[e.length - 1]
        }
    },
    mounted() {
        this.getTablesListData()
        Api.getcategoriesList().then(res => {
            this.categoriesList = res.data
        })
        /* 获取菜单的id */
        cyclicRouting(
            JSON.parse(sessionStorage.getItem('user')).menuList,
            this.$route,
            id => {
                /* 按钮权限请求 */
                getModulePermission({
                    roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                    moduleid: id
                }).then(res => {
                    /* 按钮权限赋值 */
                    for (let item in res.data) {
                        if (res.data[item].name == 'add') {
                            this.isAddBtn = true
                        } else if (res.data[item].name == 'delete') {
                            this.isDelete = true
                        }
                    }
                    /* 列表请求 */
                    // this.getTablesListData();
                })
            }
        )
    }
}
</script>

<style>
</style>

